<script setup lang="ts">
import { ModalUtil } from '/@lib/utils/modal.ts'
import { formatDateTime } from '/@lib/utils/tool.ts'
import { usePagination } from '/@lib/hooks/usePagination.ts'
import { useForm } from '/@lib/hooks/useForm.ts'
import { useLoading } from '/@lib/hooks/useLoading.ts'
import { RoleQuery, RoleVO } from '/@/api/system/sysRole/types'
import { ApiSysRole } from '/@/api/system/sysRole'
import AuthDataScope from './components/AuthDataScope.vue'
import AddOrUpdate from './AddOrUpdate.vue'

defineOptions({ name: 'sysRole' })

const { loading, showLoading, hideLoading } = useLoading()
const {
  pageNum, pageSize, total, setTotal, onChangeCurrent, onChangePageSize
} = usePagination(() => getTableList())
const queryFormRef = ref()
const { form: queryParams } = useForm<RoleQuery>({
  pageNum: computed(() => pageNum.value),
  pageSize: computed(() => pageSize.value),
  roleName: '',
  roleKey: '',
  status: ''
})
const tableRef = ref()
const tableData = ref<RoleVO[]>([])
const tableFixed = ref('right')

const AddOrUpdateRef = ref()
const AuthDataScopeRef = ref()
const AuthMenuRef = ref()
const AuthUserRef = ref()
/** 搜索按钮操作 */
const handleQuery = () => {
  pageNum.value = 1
  getTableList()
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 新增按钮操作 */
const handleAdd = async () => {
  AddOrUpdateRef.value.openAdd()
}
/** 修改按钮操作 */
const handleUpdate = async (row: RoleVO) => {
  AddOrUpdateRef.value.openEdit(row)
}
/** 删除按钮操作 */
const handleDelete = async (row: RoleVO) => {
  const _id = row.roleId
  const _idLabel = row.roleName
  try {
    await ModalUtil.confirm('是否确认删除名称为【 ' + _idLabel + ' 】的数据项？')
    showLoading()
    await ApiSysRole.remove(_id)
    ModalUtil.msgSuccess('删除成功')
    await getTableList()
  } finally {
    hideLoading()
  }
}

const handleAuthMenu = async (row: RoleVO) => {
  AuthMenuRef.value.open(row)
}
const handleAuthDataScope = async (row: RoleVO) => {
  AuthDataScopeRef.value.open(row)
}
const handleAuthUser = async (row: RoleVO) => {
  AuthUserRef.value.open(row)
}

const getTableList = async () => {
  showLoading()
  try {
    const res = await ApiSysRole.page(queryParams)
    tableData.value = res.rows
    setTotal(res.total)
  } finally {
    hideLoading()
  }
}
getTableList()
const successCallback = () => {
  getTableList()
}
</script>

<template>
  <div class="page-container">

    <el-card shadow="never" class="card-body-no-padding-bottom">
      <VipQueryForm>
        <VipQueryFormLeftPanel :span="24">
          <el-form ref="queryFormRef" :model="queryParams" inline label-width="80px" label-position="right">
            <el-form-item label="角色名称" prop="roleName">
              <el-input
                v-model="queryParams.roleName"
                placeholder="请输入角色名称"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="权限字符" prop="roleKey">
              <el-input
                v-model="queryParams.roleKey"
                placeholder="请输入权限字符"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>

            <!--   搜索按钮   -->
            <el-form-item>
              <el-button plain type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </VipQueryFormLeftPanel>
      </VipQueryForm>
    </el-card>

    <el-card shadow="never" class="flex-column flex-auto no-margin-bottom">
      <VipTableTool>
        <VipTableToolLeftPanel>
          <el-button icon="Plus" type="primary" @click="handleAdd">添加</el-button>
        </VipTableToolLeftPanel>
      </VipTableTool>

      <div class="flex-auto">
        <el-table ref="tableRef" v-loading="loading" :data="tableData" border style="height: 100%">
          <!--              <el-table-column type="selection" width="50" align="center" />-->
          <el-table-column type="index" label="序号" width="55" align="center" />

          <!--  主内容   -->
          <el-table-column v-if="false" label="角色编号" prop="roleId" width="120" />
          <el-table-column align="center" label="角色名称" prop="roleName" show-overflow-tooltip />
          <el-table-column align="center" label="权限字符" prop="roleKey" show-overflow-tooltip />
          <el-table-column align="center" label="显示顺序" prop="sortNum" width="100" />
          <el-table-column align="center" label="备注" prop="remark" />
          <!--          <el-table-column align="center" label="状态" prop="status" width="140">-->
          <!--            <template #default="{ row }">-->
          <!--              <div class="flex-center">-->
          <!--                <VipDictTag :options="sys_normal_disable" :value="row.status" />-->
          <!--                <el-switch-->
          <!--                  class="margin-left"-->
          <!--                  v-model="row.status"-->
          <!--                  active-value="0"-->
          <!--                  inactive-value="1"-->
          <!--                  @change="handleStatusChange(row)"-->
          <!--                ></el-switch>-->
          <!--              </div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column label="创建时间" align="center" prop="createTime" width="160">
            <template #default="scope">
              <!--              <span>{{ scope.row.createTime }}</span>-->
              <span>{{ formatDateTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>

          <!--  操作栏   -->
          <el-table-column label="操作" :fixed="tableFixed" align="center" width="340">
            <!--            <template #header>-->
            <!--              <el-checkbox v-model="table.fixed" label="固定操作列" true-value="right" />-->
            <!--            </template>-->
            <template #default="{ row }">
              <el-space>
                <el-button text type="primary" link @click="handleUpdate(row)">修改</el-button>
                <el-button text type="danger" link @click="handleDelete(row)">删除</el-button>
                <el-button text type="primary" link @click="handleAuthMenu(row)">菜单权限</el-button>
                <el-button text type="primary" link @click="handleAuthDataScope(row)">数据权限</el-button>
                <el-button text type="primary" link @click="handleAuthUser(row)">分配用户</el-button>
              </el-space>
            </template>
          </el-table-column>

          <template #empty>
            <el-empty class="vip-data-empty" description="暂无数据" />
          </template>
        </el-table>
      </div>

      <VipPagination
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        @current-change="onChangeCurrent"
        @size-change="onChangePageSize"
      />
    </el-card>

    <AddOrUpdate ref="AddOrUpdateRef" @submit-success="successCallback"></AddOrUpdate>
    <AuthMenu ref="AuthMenuRef" @submit-success="successCallback"></AuthMenu>
    <AuthDataScope ref="AuthDataScopeRef" @submit-success="successCallback"></AuthDataScope>
    <AuthUser ref="AuthUserRef"></AuthUser>
  </div>
</template>

<style scoped lang="scss"></style>
